<template>
  <div class="task-thing-table">
    <div v-if="!disabled" class="flex justify-between items-center">
      <div>
        <el-button
          type="primary"
          size="small"
          icon="Plus"
          @click="thingDialog.show()"
        >
          登记
        </el-button>
        <el-button
          type="danger"
          size="small"
          icon="Delete"
          :disabled="selectedData.length === 0"
          @click="handleDeleteRow()"
        >
          删除
        </el-button>
      </div>
    </div>
    <Table
      :data="model"
      :select-column="!disabled"
      max-height="300px"
      @selection-change="handleSelectionChange"
    >
      <TableColumn
        label="事项标题"
        prop="matterTitle"
        :min-width="getColumnWidth(model, 'matterTitle', 100, 34)"
      >
        <template v-slot="{ row, $index }">
          <el-button
            link
            type="primary"
            @click="handleClickButton(row, $index)"
          >
            {{ row.matterTitle }}
          </el-button>
        </template>
      </TableColumn>
      <TableColumn
        label="业务领域"
        :min-width="
          runwayDictionaryInfo.getColumnDictionaryWidth(model, 'domainId', 100)
        "
      >
        <template v-slot="{ row }">
          <DictionaryShow
            parent-dictionary-value="runway"
            :value="row.domainId"
          />
        </template>
      </TableColumn>
      <TableColumn
        label="重点关注"
        :min-width="getColumnWidth(model, 'isFocus', 100)"
      >
        <template v-slot="{ row }">
          <FocusShow :status="row.isFocus" />
        </template>
      </TableColumn>
      <TableColumn v-if="!disabled" label="操作" :width="100">
        <template #default="{ row, $index }">
          <el-button
            type="danger"
            size="small"
            icon="Delete"
            :disabled="disabled"
            @click="handleDeleteRow(row, $index)"
          >
            删除
          </el-button>
        </template>
      </TableColumn>
    </Table>
    <ThingDialog
      ref="thingDialog"
      :task-id="taskId"
      :parent-disabled="disabled"
      :task-status="taskStatus"
      @refresh="refreshData"
      @update="updateData"
      @add="addData"
    />
  </div>
</template>

<script setup lang="ts">
import TableColumn from '@/components/table/TableColumn.vue'
import Table from '@/components/table/Table.vue'
import { ref, useTemplateRef } from 'vue'
import { ElMessageBox } from 'element-plus'
import ThingDialog from '@/views/mission/task/thing/ThingDialog.vue'
import DictionaryShow from '@/components/dictionary/DictionaryShow.vue'
import { deleteMatter } from '@/api/mission/task'
import FocusShow from '@/components/statusShow/focus/FocusShow.vue'
import { getColumnWidth } from '@/plugins/util'
import { useGetDictionaryInfo } from '@/hooks/useGetDictionaryInfo'
import { Message } from '@/hooks/message'

const { disabled, taskId, taskStatus } = defineProps<{
  disabled?: boolean
  taskStatus?: number
  taskId?: number | null | undefined
}>()

const runwayDictionaryInfo = useGetDictionaryInfo('runway')

const emit = defineEmits(['refresh'])
const thingDialog =
  useTemplateRef<InstanceType<typeof ThingDialog>>('thingDialog')

const selectedData = ref([])
const model = defineModel<any[]>()

function handleSelectionChange(rows: any[]) {
  selectedData.value = rows
}

function handleClickButton(row: any, index: number) {
  if (taskId) {
    thingDialog.value.show(row.id)
  } else {
    thingDialog.value.show(row, index)
  }
}

function handleDeleteRow(row?: any, index?: number) {
  let text = ''
  if (row && row.matterTitle) {
    text = `确定要删除【${row.matterTitle}】吗？`
  } else if (selectedData.value.length !== 0) {
    text = `确定要删除 ${selectedData.value.length} 条数据吗？`
  }
  if (text) {
    ElMessageBox.confirm(text, '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }).then(async () => {
      if (!taskId) {
        if (row) {
          model.value = model.value.toSpliced(index, 1)
        } else {
          model.value = model.value.filter((item) => {
            return !selectedData.value.includes(item)
          })
        }
        Message({
          message: '删除成功',
          type: 'success',
        })
      } else {
        let ids: string
        if (row) {
          ids = '' + row.id
        } else {
          ids = selectedData.value
            .map((item) => {
              return item.id
            })
            .join(',')
        }
        const { data } = await deleteMatter({ taskId, ids })
        if (data.status === 200) {
          Message({
            message: data.message,
            type: 'success',
          })
          refreshData()
        }
      }
    })
  }
}

function updateData(row: any, index: number) {
  model.value[index] = {
    id: row.id,
    matterTitle: row.matterTitle,
    domainId: row.domainId,
    responsibleLeader: row.responsibleLeader,
    isFocus: row.isFocus,
    handleRequire: row.handleRequire,
    unitId: row.unitId,
    ccUnitIds: row.ccUnitIds,
    fileIds: row.fileIds,
    fileList: row.fileList,
    matterDeadlinesList: row.matterDeadlinesList,
  }
}

function addData(row: any) {
  model.value.push({
    id: row.id,
    matterTitle: row.matterTitle,
    domainId: row.domainId,
    responsibleLeader: row.responsibleLeader,
    isFocus: row.isFocus,
    handleRequire: row.handleRequire,
    unitId: row.unitId,
    ccUnitIds: row.ccUnitIds,
    fileIds: row.fileIds,
    fileList: row.fileList,
    matterDeadlinesList: row.matterDeadlinesList,
  })
}

function refreshData() {
  emit('refresh')
}
</script>

<style scoped lang="scss">
.task-thing-table {
  width: 100%;
}
</style>
